<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">-->
<!--    <title>Login Page</title>-->
<!--    <link rel="stylesheet" href="css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">-->
<!--    &lt;!&ndash;    <link rel="stylesheet" href="css/bootstrap.min.css">&ndash;&gt;-->
<!--    &lt;!&ndash;    <link rel="stylesheet" type="text/css" href="css/bootstrap-4.6.0-dist/css/bootstrap.min.css"/>&ndash;&gt;-->
<!--    <style>-->
<!--        body {-->
<!--            font-family: Arial, sans-serif;-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            background-image: url('./img/background.png');-->
<!--            background-size: cover;-->
<!--            background-position: center;-->
<!--        }-->

<!--        .container {-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            height: 100vh;-->
<!--        }-->

<!--        .login-box {-->
<!--            background-color: rgba(255, 255, 255, 0.7); /* 透明度为0.7的白色背景 */-->
<!--            border-radius: 10px;-->
<!--            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);-->
<!--            padding: 20px;-->
<!--            width: 300px;-->
<!--        }-->

<!--        .login-box h2 {-->
<!--            text-align: center;-->
<!--            margin-bottom: 20px;-->
<!--        }-->

<!--        .login-box input[type="text"],-->
<!--        .login-box input[type="password"] {-->
<!--            width: 100%;-->
<!--            padding: 10px;-->
<!--            border: 1px solid #ccc;-->
<!--            border-radius: 5px;-->
<!--            margin-bottom: 15px;-->
<!--            box-sizing: border-box;-->
<!--        }-->

<!--        .login-box input[type="submit"] {-->
<!--            width: 100%;-->
<!--            background-color: #4caf50;-->
<!--            color: #fff;-->
<!--            border: none;-->
<!--            padding: 10px;-->
<!--            border-radius: 5px;-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        .login-box input[type="submit"]:hover {-->
<!--            background-color: #45a049;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="container">-->
<!--    <div class="login-box">-->
<!--        &lt;!&ndash;        用户登录&ndash;&gt;-->
<!--        <h2>用户登录</h2>-->
<!--        &lt;!&ndash;        <form id="loginForm" onsubmit="sublim(event)">&ndash;&gt;-->
<!--        <form id="loginForm" action="/Mall/product/login" method="post" onsubmit="sublim(event)">-->
<!--            <input type="text" name="username" placeholder="请输入用户名" required id="username">-->
<!--            <input type="password" name="password" placeholder="请输入密码" required id="pwd">-->
<!--            <div style="display: flex; align-items: center;">-->
<!--                <input class="form-control" placeholder="验证码" type="text" name="safeCode" id="safeCode" required>-->
<!--                <canvas id="canvas" width="100" height="43" onclick="dj()"-->
<!--                        style="border: 1px solid #ccc;-->
<!--                        border-radius: 5px;"></canvas>-->
<!--            </div>-->
<!--            <input type="submit" value="登录">-->
<!--            <a href="register.html" id="nav1">注册</a>-->
<!--        </form>-->


<!--    </div>-->
<!--</div>-->
<!--</body>-->
<!--<script>-->


<!--    var show_num = [];-->
<!--    draw(show_num);-->

<!--    function dj() {-->
<!--        draw(show_num);-->
<!--    }-->

<!--    function sublim(event) {-->
<!--        var val = document.getElementById("safeCode").value;-->
<!--        var username = document.getElementById("username").value;-->
<!--        var pwd = document.getElementById("pwd").value;-->

<!--        var num = show_num.join("");-->
<!--        if (val == '') {-->
<!--            event.preventDefault(); // Prevent form submission-->
<!--            // alert('请输入验证码！');-->
<!--        } else if (val.toLowerCase() == num.toLowerCase()) {-->
<!--            // 存入cookies-->
<!--            let expiresDate = new Date();-->
<!--            expiresDate.setDate(expiresDate.getDate() + 5);  // 设置cookie值 5天后过期。-->
<!--            if (username.trim() != "") {   // trim() 去掉cookie字段值前后的空格。-->
<!--                document.cookie = `username=${username};expires=${expiresDate}`;-->
<!--            }-->
<!--            if (userId.trim() != "") {-->
<!--                document.cookie = `userId=${userId};expires=${expiresDate}`;-->
<!--            }-->
<!--            draw(show_num);-->

<!--        } else {-->
<!--            event.preventDefault(); // Prevent form submission-->
<!--            alert('验证码错误，请重新输入。');-->
<!--            document.getElementById("text").value = '';-->
<!--            draw(show_num);-->
<!--        }-->


<!--    }-->

<!--    function draw(show_num) {-->
<!--        var canvas_width = document.getElementById('canvas').clientWidth;-->
<!--        var canvas_height = document.getElementById('canvas').clientHeight;-->
<!--        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员-->
<!--        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台-->
<!--        canvas.width = canvas_width;-->
<!--        canvas.height = canvas_height;-->
<!--        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";-->
<!--        var aCode = sCode.split(",");-->
<!--        var aLength = aCode.length;//获取到数组的长度-->

<!--        for (var i = 0; i <= 3; i++) {-->
<!--            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值-->
<!--            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度-->
<!--            var txt = aCode[j];//得到随机的一个内容-->
<!--            show_num[i] = txt;-->
<!--            var x = 10 + i * 20;//文字在canvas上的x坐标-->
<!--            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标-->
<!--            context.font = "bold 23px 微软雅黑";-->

<!--            context.translate(x, y);-->
<!--            context.rotate(deg);-->

<!--            context.fillStyle = randomColor();-->
<!--            context.fillText(txt, 0, 0);-->

<!--            context.rotate(-deg);-->
<!--            context.translate(-x, -y);-->
<!--        }-->
<!--        for (var i = 0; i <= 5; i++) { //验证码上显示线条-->
<!--            context.strokeStyle = randomColor();-->
<!--            context.beginPath();-->
<!--            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);-->
<!--            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);-->
<!--            context.stroke();-->
<!--        }-->
<!--        for (var i = 0; i <= 30; i++) { //验证码上显示小点-->
<!--            context.strokeStyle = randomColor();-->
<!--            context.beginPath();-->
<!--            var x = Math.random() * canvas_width;-->
<!--            var y = Math.random() * canvas_height;-->
<!--            context.moveTo(x, y);-->
<!--            context.lineTo(x + 1, y + 1);-->
<!--            context.stroke();-->
<!--        }-->
<!--    }-->

<!--    function randomColor() {//得到随机的颜色值-->
<!--        var r = Math.floor(Math.random() * 256);-->
<!--        var g = Math.floor(Math.random() * 256);-->
<!--        var b = Math.floor(Math.random() * 256);-->
<!--        return "rgb(" + r + "," + g + "," + b + ")";-->
<!--    }-->
<!--</script>-->
<!--</html>-->

<!--&lt;!&ndash;<!DOCTYPE html>&ndash;&gt;-->
<!--&lt;!&ndash;<html lang="en">&ndash;&gt;-->
<!--&lt;!&ndash;<head>&ndash;&gt;-->
<!--&lt;!&ndash;    <meta charset="UTF-8">&ndash;&gt;-->
<!--&lt;!&ndash;    <title>Title</title>&ndash;&gt;-->

<!--&lt;!&ndash;    <style>&ndash;&gt;-->
<!--&lt;!&ndash;        table {&ndash;&gt;-->
<!--&lt;!&ndash;            margin: 100px auto;&ndash;&gt;-->
<!--&lt;!&ndash;            width: 400px;&ndash;&gt;-->
<!--&lt;!&ndash;            font-size: 15px;&ndash;&gt;-->
<!--&lt;!&ndash;            text-align: center;&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->

<!--&lt;!&ndash;        td {&ndash;&gt;-->
<!--&lt;!&ndash;            vertical-align: middle; /* 确保内容上下居中 */&ndash;&gt;-->
<!--&lt;!&ndash;            padding: 10px; /* 添加适当的内边距 */&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->

<!--&lt;!&ndash;        .form-control, img {&ndash;&gt;-->
<!--&lt;!&ndash;            margin-left: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->
<!--&lt;!&ndash;        .back{&ndash;&gt;-->
<!--&lt;!&ndash;            background-image: url("./img/background.png");&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->

<!--&lt;!&ndash;    </style>&ndash;&gt;-->

<!--&lt;!&ndash;</head>&ndash;&gt;-->
<!--&lt;!&ndash;<body>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="back">&ndash;&gt;-->
<!--&lt;!&ndash;    <form action="/Mall/product/login" method="post" onsubmit="sublim(event)">&ndash;&gt;-->
<!--&lt;!&ndash;        <table class="table table-bordered" style="width: 400px">&ndash;&gt;-->
<!--&lt;!&ndash;            <tr class="bg-primary">&ndash;&gt;-->
<!--&lt;!&ndash;                <th colspan="2" style="text-align: center;">&ndash;&gt;-->
<!--&lt;!&ndash;                    <span style="color: white; font-size: x-large;">用户登录</span>&ndash;&gt;-->
<!--&lt;!&ndash;                </th>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--&lt;!&ndash;            <tr>&ndash;&gt;-->
<!--&lt;!&ndash;                <td><i class="fa fa-user fa-2x"></i></td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td><input class="form-control" placeholder="请输入用户名" type="text" name="username" id="username">&ndash;&gt;-->
<!--&lt;!&ndash;                </td>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--&lt;!&ndash;            <tr>&ndash;&gt;-->
<!--&lt;!&ndash;                <td><i class="fa fa-lock fa-2x"></i></td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td><input class="form-control" placeholder="请输入密码" type="password" name="password" id="pwd"></td>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--&lt;!&ndash;            <tr>&ndash;&gt;-->
<!--&lt;!&ndash;                <td><i class="fa fa-image fa-2x"></i></td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>&ndash;&gt;-->
<!--&lt;!&ndash;                    <div style="display: flex; align-items: center;">&ndash;&gt;-->
<!--&lt;!&ndash;                        <input class="form-control" placeholder="验证码" type="text" name="safeCode" id="safeCode">&ndash;&gt;-->
<!--&lt;!&ndash;                        &lt;!&ndash;                    <img id="captchaImg" src="img/test.png" alt="验证码" style="margin-left: 10px; cursor: pointer;"&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                        &lt;!&ndash;                         onclick="changeCaptcha()"/>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                        <canvas id="canvas" width="100" height="43" onclick="dj()"&ndash;&gt;-->
<!--&lt;!&ndash;                                style="border: 1px solid #ccc;&ndash;&gt;-->
<!--&lt;!&ndash;        border-radius: 5px;"></canvas>&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                </td>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--&lt;!&ndash;            <tr>&ndash;&gt;-->
<!--&lt;!&ndash;                <td><input class="btn btn-outline-info" type="reset" value="重置"></td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td><input class="btn btn-outline-primary" style="width: 200px;" type="submit" value="登录"&ndash;&gt;-->
<!--&lt;!&ndash;                ></td>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--&lt;!&ndash;        </table>&ndash;&gt;-->
<!--&lt;!&ndash;    </form>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</body>&ndash;&gt;-->
<!--&lt;!&ndash;<script>&ndash;&gt;-->


<!--&lt;!&ndash;</script>&ndash;&gt;-->
<!--&lt;!&ndash;</html>&ndash;&gt;-->
